<template>
  <div class="report">
    <top-bar :isBlack="true" :title="type"></top-bar>
    <div
      class="card-list"
      v-if="type == 'Top Seller' || city || type == 'Receiving Hotel'"
    >
      <div v-for="item in list" :key="item.id" class="card">
        <div class="card-title">
          <p>
            {{
              item["Sender Hotel Name"]
                ? item["Sender Hotel Name"]
                : item["Receiving Hotel Name"]
            }}
          </p>
          <p>{{ item["Sender Hotel Brand"] }}</p>
        </div>
        <p class="card-name">
          {{
            item["Sender Hotel Code"]
              ? item["Sender Hotel Code"]
              : item["Hotel Code"]
          }}
        </p>
        <div class="card-body">
          <div
            class="card-body-item"
            @click="
              goDetail(
                item['Sender Hotel Code']
                  ? item['Sender Hotel Code']
                  : item['Hotel Code'],
                'Definite'
              )
            "
          >
            <p class="card-label">Definite Leads</p>
            <p class="card-value">
              {{
                item["Definite Leads"]
                  ? item["Definite Leads"]
                  : item["# Definite Leads"]
              }}
            </p>
          </div>
          <div
            class="card-body-item"
            @click="
              goDetail(
                item['Sender Hotel Code']
                  ? item['Sender Hotel Code']
                  : item['Hotel Code'],
                'Total'
              )
            "
          >
            <p class="card-label">Total Leads</p>
            <p class="card-value">
              {{
                item["Total Leads"]
                  ? item["Total Leads"]
                  : item["# Total Leads"]
              }}
            </p>
          </div>
          <div class="card-body-item" v-if="type != 'Receiving Hotel'">
            <p class="card-label">Conversion %</p>
            <p class="card-value">{{ item["Conversion %"] | percentage }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="card-list">
      <div
        v-for="item in list"
        :key="item.id"
        class="card"
        @click="goList(item['Sub-Region'], item['Province'], item['City'])"
      >
        <div class="card-title">
          <p>{{ isProvince ? item["Province"] : item["City"] }}</p>
          <p>
            <img src="@/assets/icon_14.png" alt="" class="card-title-icon" />
          </p>
        </div>
        <div class="card-body">
          <div class="card-body-item">
            <p class="card-label">Definite Leads</p>
            <p class="card-value">
              {{
                item["Definite Leads"]
                  ? item["Definite Leads"]
                  : item["# Definite Leads"]
              }}
            </p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Total Leads</p>
            <p class="card-value">
              {{
                item["Total Leads"]
                  ? item["Total Leads"]
                  : item["# Total Leads"]
              }}
            </p>
          </div>
          <div class="card-body-item" v-if="type != 'Receiving Hotel'">
            <p class="card-label">Conversion %</p>
            <p class="card-value">{{ item["Conversion %"] | percentage }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import TopBar from "@/components/topBar.vue";
export default {
  name: "report",
  data() {
    return {
      type: "",
      region: "",
      province: "",
      city: "",
      list: [],
      isProvince: true,
    };
  },
  mounted() {
    // this.getList();
  },
  methods: {
    goList(region, province, city) {
      this.$router.push({
        path: "/reportList",
        query: {
          type: this.type,
          region,
          province: this.isProvince ? province : "",
          city: this.isProvince ? "" : city,
        },
      });
      // if (region) {
      //   this.region = region;
      // }
      // if (province) {
      //   this.province = province;
      // }
      // if (city) {
      //   this.city = city;
      // }
      // this.getList();
    },
    getList() {
      console.log(111)
      this.type = this.$route.query.type;
      this.region = this.$route.query.region;
      this.isProvince = this.$route.query.province ? false : true;
      if (this.$route.query.province) {
        this.province = this.$route.query.province;
      }
      if (this.$route.query.city) {
        // this.province = "";
        this.city = this.$route.query.city;
      }
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.list = [];
      if (this.type == "Top Seller") {
        this.$api.topseller().then((res) => {
          Toast.clear();
          if (res.status_code == 200) {
            this.list = res.data;
          }
        });
      } else if (this.type == "Sender Hotel") {
        this.$api
          .senderHotel({
            region: this.region,
            province: this.province,
            city: this.city,
          })
          .then((res) => {
            Toast.clear();
            if (res.status_code == 200) {
              this.list = res.data;
            }
          });
      } else if (this.type == "Receiving Hotel") {
        this.$api
          .receivingHotel({
            region: this.region,
            province: this.province,
            city: this.city,
          })
          .then((res) => {
            Toast.clear();
            if (res.status_code == 200) {
              this.list = res.data;
            }
          });
      }
    },
    goDetail(code, type) {
      this.$router.push({
        path: "/reportDesc",
        query: {
          code,
          type,
        },
      });
    },
  },
  watch: {
    $route: {
      handler: function () {
        this.type = "";
        this.region = "";
        this.province = "";
        this.city = "";
        this.getList();
      },
      immediate: true,
    },
  },
  filters: {
    percentage(num) {
      if (!(num * 1)) {
        return "0%";
      }
      let data = Math.floor(num * 100);
      return data + "%";
    },
  },
  components: {
    TopBar,
  },
};
</script>

<style lang="scss" scoped>
.report {
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  overflow-y: auto;
  .card-list {
    .card {
      margin-top: 10px;
      background-color: #fff;
      .card-title {
        background: #224448;
        padding: 12px 15px;
        display: flex;
        justify-content: space-between;
        min-height: 40px;
        align-items: center;
        p {
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
          .card-title-icon {
            display: block;
            width: 14px;
            height: 16px;
            object-fit: contain;
          }
        }
      }
      .card-name {
        margin: 0 15px;
        line-height: 40px;
        font-size: 13px;
        font-weight: 500;
        color: #666666;
        border-bottom: 1px solid #f4f4f4;
      }
      .card-body {
        padding: 18px 16px;
        word-break: break-all;
        display: flex;
        .card-body-item {
          flex: 1;
          text-align: center;
          .card-label {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
          }

          .card-value {
            font-size: 25px;
            font-weight: 800;
            color: #3899a4;
            margin-top: 16px;
          }
        }
      }
    }
  }
}
</style>